<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面</title>
    <!-- 引入bootstrap.css -->
    <script src="static/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="fontawesome/css/all.css">
    <link rel="stylesheet" href="static/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/bootoast.css">
    <script src="js/index.js"></script>
    <script src="static/js/bootstrap.js"></script>
    <script src="js/bootoast.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .my-container {
            height: 100%;
            padding: 0;
        }

        .header {
            width: 100%;
            height: 120px;
            overflow: hidden;
            background-color: #CCCCCC;
        }
        /* logo图片 */
        .header .logo img {
            height: 80px;
            margin-top: 20px;
        }

        .user {
            padding-top: 40px;
            overflow: hidden;
        }
        .user .img {
            position: relative;
            /*margin-right: 60px;*/
            margin-left: -30px;
            margin-top: 20px;
        }

        .Body {
            width: 100%;
            height: calc(100% - 120px);
            overflow: hidden;
        }
        /* 左边菜单 */
        .Body .menu {
            width: 260px;
            height: 100%;
            float: left;
        }
        
        .menu iframe{
            border: none;
            width: 100%;
            height: 100%;
        }
        /* 右边信息界面 */
        .Body .card {
            width: calc(100% - 260px);
            height: 100%;
            float: left;
        }

        .Body .card iframe {
            border: none;
            width: 100%;
            height: 100%;
        }
        #myiframe{
            width: 880px;
            height: 600px;
        }
        #username{
            border: none;
            background-color: #CCCCCC;
            font-weight: bolder;
            font-size: 15px;
            /*margin-left: 20px;*/
            /*margin-top: -30px;*/
        }
        #username:hover{
            color: #5098ad;
        }
        #nicheng{
            border: none;
            background-color: #CCCCCC;
            position: relative;
            margin-left: 5px;
            margin-top: -10px;
        }
        #nicheng:hover{
            color: #5098ad;
        }
        .btn-danger{
            width: 60px;
            padding:2px 0;
            margin-left: 15px;
        }
        #kl{
            float: left;
            position: relative;
            width: 200px;
            height: 200px;
            margin-top: 450px;
            margin-left: -1565px;
        }
    </style>
    <script>
        $(function(){
            $("#username").val(sessionStorage.getItem("nickName"));
            $("#nicheng").val("昵称:"+sessionStorage.getItem("username"));
            initModal()
            click()
        })
        function initModal() {
            // 处理修改模态框
            $('#myModal3').on('shown.bs.modal', function () {
                // 接收传递的数据
                let username=sessionStorage.getItem("username")
                let userId=sessionStorage.getItem("userId")
                console.log(`username=${username}`);
                var modal = $(this)
                // 绑定数据
                modal.find('.modal-body #myname').val(username)
                modal.find('.modal-body #userId').val(userId)
            })
        }
        function click() {
            $("#nicheng-btn").click(function () {
                save();
            })
        }
        function save(){
            let username=$("#myname").val();
            let userId=$("#userId").val();
            console.log(`${username}&${userId}`)
            if (!username || username === '') {
                bootoast({
                    message: '昵称不能为空！',
                    type: 'danger',
                    position: 'top',
                    timeout: 2
                });
                return false;
            }
            $.ajax({
                type: 'post',// 提交方式 post
                url: '/welcome/student?operate=modifynicheng',//
                cache: false,// 不启用缓存
                data: `userId=${userId}&username=${username}`,
                dataType: 'json',// 期望服务器响应的数据类型 json
                success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                    console.log(result);
                    // 提示
                    bootoast({
                        message: result.msg,
                        type: 'success',
                        position: 'top',
                        timeout: 2
                    });
                    window.top.location.href = "login.html";
                    // 关闭修改模态框
                    $('#exampleModal').modal('hide')
                },
                error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                    // 提示
                    bootoast({
                        message: '服务器请求错误！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                }

            })
        }
    </script>
</head>

<body>
    <div class="container-fluid my-container">
        <!-- 头部 -->
        <div class="header">
            <div class="row">
                <!-- logo -->
                <div class="col-md-4 logo">
                    <img src="img/6.png" alt="">
                </div>
                <!-- 登录信息 -->
                <div class="col-md-offset-6 col-md-2 user">
                    <input type="button" data-toggle="modal" data-target="#myModal" id="username">
                    <input type="button" id="nicheng" data-toggle="modal" data-target="#myModal3">
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal2" style="box-shadow: 2px 2px black;">退出登录</button>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="Body">
            <div class="menu">
                <iframe src="static2/Menu.html" frameborder="0"></iframe>
            </div>
            <div class="card">
                <iframe class="card" src="wel.html" id="card" name="card"></iframe>
            </div>
            <div id="kl">
                <iframe src="kl.html" frameborder="0"></iframe>
            </div>
        </div>
    </div>
    <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel"
                        style="border-left: 5px solid red;padding-left: 10px;">查看个人信息</h4>
                </div>
                <div class="modal-body">
                    <iframe src="message.html" id="myiframe"></iframe>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2Label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModal2Label2"
                        style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
                </div>
                <form action="student" method="post">
                    <input type="hidden" name="operate" value="del">
                    <div class="modal-body">
                        确定退出登录？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <a href="http://localhost:8080/welcome/login.html"><button type="button" class="btn btn-primary" id="del-btn">确认</button></a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel1"
                        style="border-left: 5px solid red;padding-left: 10px;">修改昵称</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="userId" id="userId">
                    <h5>请输入你想要的昵称</h5>
                    <!-- 表单 -->
                    <div class="form-group">
                        <label for="myname">昵<span style="color:transparent;user-select: none;">隐藏</span>称：</label>
                        <input type="text" class="form-control" name="nickName" id="myname" placeholder="请输入你想要的昵称">
                    </div>
                    <button type="button" class="btn btn-primary" id="nicheng-btn">确认</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>